<template>
  <div class="toilet item">
    <div class="title after">
      {{$route.meta.title}}
      <div class="search">
        <el-input
          v-model="search.value"
          size="small"
          placeholder="搜索"
          @keyup.enter.native="searchHandle();page.current=1"
          class="input"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click="searchHandle();page.current=1"
          class="button"
        >搜索</el-button>
        <el-button
          size="small"
          type="primary"
          @click="form.show =true;form.edit=false"
          class="button"
          v-if="user.type==0 || user.type==1"
        >添 加</el-button>
      </div>
    </div>
    <div class="list">
      <el-table ref="selects" :data="list" @selection-change="change" v-loading="loading">
        <el-table-column type="selection" width="55" v-if="user.type==0 || user.type==1"></el-table-column>
        <el-table-column label="名称" prop="title"></el-table-column>

        <el-table-column label="街道名称" prop="street_title"></el-table-column>
        <el-table-column label="村名称" prop="village_title"></el-table-column>
        <el-table-column label="添加用户" prop="user_name"></el-table-column>

        <el-table-column label="图片列表" prop="info">
          <template slot-scope="scope">
            <img-list :item="scope.row"></img-list>
          </template>
        </el-table-column>
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="期数" prop="period"></el-table-column>
        <el-table-column label="备注" prop="info"></el-table-column>
        <el-table-column label="添加时间" prop="addtime"></el-table-column>

        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="form.list = {...scope.row};form.show=true;searchVillage(scope.row.street_id);form.list.village_id=scope.row.village_id"
              v-if="user.type==0 || user.type==1"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="del(scope.row)"
              v-if="user.type==0 || user.type==1"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <div class="action after">
        <div class="left">
          <el-button @click="checkAll" size="small" v-if="user.type==0 || user.type==1">全选</el-button>
          <el-button
            @click="del(checkList)"
            size="small"
            type="danger"
            v-if="user.type==0 || user.type==1"
          >删除选中项</el-button>
        </div>
        <div class="right">
          <el-pagination
            layout="total,prev, pager, next"
            :total="page.count"
            :page-size="page.size"
            @current-change="pageChange"
            :current-page="page.current"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加修改 -->
    <el-dialog title="操作" width="600px" :visible.sync="form.show" @closed="down">
      <el-form :model="form.list" :rules="form.rules" ref="form.list" size="small">
        <el-form-item label="名称 : " label-width="100px" prop="title">
          <el-input v-model="form.list.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="街道 : " label-width="100px" prop="street_id">
          <el-select
            v-model="form.list.street_id"
            placeholder="请选择 (搜索 - 清空)"
            style="width:100%"
            filterable
            clearable
            @change="searchVillage"
          >
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in streetList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="街道管理员 : " label-width="100px">
          <div class="f-w-b">{{form.list.street_user_name?form.list.street_user_name:'请选择街道'}}</div>
        </el-form-item>
        <el-form-item label="村 : " label-width="100px" prop="village_id">
          <el-select
            v-model="form.list.village_id"
            placeholder="请选择 (搜索 - 清空)"
            style="width:100%"
            filterable
            clearable
          >
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in villageList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年份 : " label-width="100px" prop="year">
          <el-select
            v-model="form.list.year"
            placeholder="请选择 (搜索 - 清空)"
            style="width:100%"
            filterable
            clearable
            @change="searchPeriod"
          >
            <el-option :label="item" :value="item" v-for="item in yearList" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期数 : " label-width="100px" prop="period">
          <el-select
            v-model="form.list.period"
            placeholder="请选择 (搜索 - 清空)"
            style="width:100%"
            filterable
            clearable
          >
            <el-option
              :value="'第'+changeIntChar(item)+'期'"
              v-for="item in periodList.period"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注 : " label-width="100px">
          <el-input v-model="form.list.info" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit()" size="small" :loading="form.state">提 交</el-button>
        <el-button @click="form.show=false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import imgList from "./imgList";
export default {
  components: {
    imgList
  },
  data() {
    return {
      list: [],
      form: {
        show: false,
        list: {
          title: "",
          street_id: "",
          village_id: "",
          user_id: this.$store.state.user.id,
          year: "",
          period: "",
          info: ""
        },
        // 表单验证
        rules: {
          title: [{ required: true, message: "请输入名称", trigger: "blur" }],
          street_id: [
            { required: true, message: "请选择街道", trigger: "blur" }
          ],
          village_id: [
            { required: true, message: "请选择村", trigger: "blur" }
          ],
          year: [{ required: true, message: "请选择年份", trigger: "blur" }],
          period: [{ required: true, message: "请选择期数", trigger: "blur" }]
        },
        // 表单提交状态
        state: false
      },
      // 年份列表
      yearList: [],
      // 期数
      periodList: "",
      // 街道列表
      streetList: [],
      // 村列表
      villageList: [],
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      user: this.$store.state.user,
      // 空列表 存储已经选中的选项
      checkList: [],
      // 搜索
      search: {
        value: ""
      },
      // 加载
      loading: false
    };
  },
  methods: {
    // 数字转字符串 1 -> 一
    changeIntChar(i) {
      var c = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
      return c[i];
    },
    // 搜索期数
    searchPeriod(year, empty = true) {
      // 清空期数
      if (empty) {
        this.form.list.period = "";
      }
      if (!year) {
        this.periodList = "";
        return false;
      }
      var data = {
        year: year
      };
      this.axios.post("/admin/Index/search_year_period", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.periodList = ref.other.data[0];
        }
      });
    },
    // 搜索年份
    searchYear() {
      this.axios.post("/admin/Index/search_year_period").then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data,
            year = [];
          for (var i in data) {
            if (year.indexOf(data[i].year) == -1) {
              year.push(data[i].year);
            }
          }
          this.yearList = year;
        }
      });
    },
    // 搜索街道
    searchStreet() {
      this.axios.post("/admin/Index/search_street").then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.streetList = ref.other.data;
        }
      });
    },
    // 搜索村
    searchVillage(id) {
      if (!id) {
        this.villageList = [];
        return false;
      }
      // 设置街道管理员名称
      for (var i in this.streetList) {
        if (this.streetList[i].id == id) {
          this.form.list.street_user_name = this.streetList[i].user_name;
          break;
        }
      }
      this.form.list.street_id = id;
      this.form.list.village_id = "";
      var data = {
        street_id: id
      };
      this.axios.post("/admin/Index/search_village", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.villageList = ref.other.data;
        }
      });
    },

    // 搜索街道管理员
    searchUser() {
      var data = {
        type: 3
      };
      this.axios.post("/admin/Index/search_user", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.form.userList = ref.other.data;
        }
      });
    },
    // 增加修改
    submit() {
      this.$refs["form.list"].validate(valid => {
        if (valid) {
          var form = this.form;
          this.form.state = true;
          var data = { ...form.list };
          data["T"] = "toilet";
          this.axios.post("/admin/Index/handle", data).then(ref => {
            var ref = ref.data;
            if (ref.state) {
              this.common.message({ message: ref.info });
              // 关闭弹窗
              form.show = false;
              // 重新搜索
              this.searchHandle();
            } else {
              this.common.message({ message: ref.info, type: "error" });
            }
            // 关闭提交锁定
            setTimeout(() => {
              this.form.state = false;
            }, 1000);
          });
        }
      });
    },
    // 删除图片
    delImg(img) {
      var data = img;
      if (img.length) {
        return this.axios.post("/admin/Index/del_file", data);
      }
    },
    // 删除
    del(row) {
      // 选中项为空时
      if (row.length == 0) {
        this.common.message({
          message: "删除失败,请选择删除项",
          type: "warning"
        });
        return false;
      }
      this.common.confirm().then(() => {
        var data = { T: "toilet", id: [] },
          img = [];
        row = row.length ? row : [row];
        for (var i in row) {
          data.id.push(row[i]["id"]);

          // 当图片存在时
          if (row[i].img_list) {
            JSON.parse(row[i].img_list).forEach(v => {
              img.push(v.path);
            });
          }
        }
        var url = "/admin/Index/del";
        // 请求发送
        this.axios.post(url, data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            // 计算总页数
            var n = Math.ceil((this.page.count - row.length) / this.page.size);
            // 更新页码
            if (n && n < this.page.current) this.page.current--;
            // 重新搜索
            this.searchHandle();
            this.common.message({ message: ref.info });
            // 删除图片
            this.delImg(img);
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 清空
    down() {
      this.form.list = {
        title: "",
        street_id: "",
        village_id: "",
        user_id: this.$store.state.user.id,
        year: "",
        period: "",
        info: ""
      };
      this.$refs["form.list"].resetFields();
    },
    // 搜索
    searchHandle() {
      // 开启加载
      this.loading = true;
      var data = {
        info: this.search.value,
        // 页码
        page: {
          current: this.page.current,
          size: this.page.size
        }
      };
      this.axios.post("/admin/Index/search_toilet", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.list = ref.other.data;
          this.page.count = ref.other.count;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        // 开启加载
        this.loading = false;
      });
    },
    // 当选择框出现改变时
    change(selection) {
      this.checkList = selection;
    },
    // 选中全部
    checkAll() {
      this.list.forEach(row => {
        this.$refs.selects.toggleAllSelection(row);
      });
    },
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    }
  },
  created() {
    this.searchStreet();
    this.searchYear();
    this.searchHandle();
  }
};
</script>
<style scoped>
.search {
  float: right;
}
.search .input {
  width: 200px;
  margin-right: 10px;
}
</style>